<template>
  <div :class="$style.whitemodal2">
    <div :class="$style.topBlock">
      <div :class="$style.groupArea">
        <div :class="$style.titleBox">团队详情</div>
        <div :class="$style.groupBox">
          <div :class="$style.groupItem">
            <div :class="[$style.groupText, $style.groupText1]">
              三代会员统计：
            </div>
            <div :class="[$style.groupText, $style.groupText2]">
              <span :class="$style.groupBold"> 0</span>人 已认证
            </div>
            <div :class="[$style.groupText, $style.groupText3]">
              <span :class="$style.groupBold"> 0</span>人 已认证
            </div>
          </div>
          <div :class="$style.groupItem">
            <div :class="[$style.groupText, $style.groupText1]">
              一代会员：
            </div>
            <div :class="[$style.groupText, $style.groupText2]">
              <span :class="$style.groupBold"> 0</span>人 已认证
            </div>
            <div :class="[$style.groupText, $style.groupText3]">
              <span :class="$style.groupBold"> 0</span>人 已认证
            </div>
          </div>
          <div :class="$style.groupItem">
            <div :class="[$style.groupText, $style.groupText1]">
              二代会员：
            </div>
            <div :class="[$style.groupText, $style.groupText2]">
              <span :class="$style.groupBold"> 0</span>人 已认证
            </div>
            <div :class="[$style.groupText, $style.groupText3]">
              <span :class="$style.groupBold"> 0</span>人 已认证
            </div>
          </div>
          <div :class="$style.groupItem">
            <div :class="[$style.groupText, $style.groupText1]">
              三代会员：
            </div>
            <div :class="[$style.groupText, $style.groupText2]">
              <span :class="$style.groupBold"> 0</span>人 已认证
            </div>
            <div :class="[$style.groupText, $style.groupText3]">
              <span :class="$style.groupBold"> 0</span>人 已认证
            </div>
          </div>
        </div>
      </div>
      <div :class="$style.codeArea">
        <div :class="$style.titleBox">推荐码</div>
        <div :class="$style.codeBox">
          <img :class="$style.codeIcon" src="/code.png" alt="">
          <div :class="$style.codeText">
            <div :class="$style.codeText1">
              我的邀请码：<span :class="$style.codeBold">mqwtd</span>
            </div>
            <div :class="$style.codeText2" @click="copyText">复制邀请链接</div>
          </div>
        </div>
      </div>
    </div>
    <div :class="$style.mainBlock">
      <div :class="$style.titleBox">登录日志</div>
      <lay-table height="300px" :columns="columnList" :data-source="dataList">
      </lay-table>
    </div>
  </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "WhiteModal2",
  data() {
    return {
      tabIndex: 0,
      dataList: [
        {name1:'sas001',name2:'222',name3:'333'},
        {name1:'sas001',name2:'222',name3:'333'},
      ],
      columnList: [
        { title: '登录类型', width: '', key: 'name1' },
        { title: '登录IP', width: '', key: 'name2' },
        { title: '登录时间', width: '', key: 'name3' },
      ]
    };
  },
  methods: {
    async copyText() {
      let text='https://www.baidu.com';
      try {
        await navigator.clipboard.writeText(text);
      } catch (err) {
        this.$layer.msg('复制失败,请重试', { time: 1000 });
      }
    },
    changeTab(index) {
      this.tabIndex = index;
    },
  },
});
</script>
<style module>
.whitemodal2 {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 25px 20px;
  overflow-y: auto;
}

.topBlock {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}

.titleBox {
  font-family: Source Han Sans;
  font-size: 18px;
  font-weight: 500;
  color: #000000;
}

.groupBox {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.groupItem {
  margin-left: 20px;
}

.groupItem:first-child {
  margin-left: 0;
}

.groupText {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 300;
  color: #515A6E;
}

.groupText1 {
  margin-bottom: 15px;
}

.groupText2 {
  margin-bottom: 15px;
}

.groupBold {
  font-size: 20px;
  font-weight: 500;
  color: #000000;
}

.codeArea {
  margin-left: 10px;
}

.codeBox {
  display: flex;
  margin-top: 12px;
}

.codeIcon {
  width: 100px;
  height: 100px;
}

.codeText {
  box-sizing: border-box;
  padding-top: 20px;
  margin-left: 10px;
}

.codeText1 {
  font-family: Source Han Sans;
  font-weight: 300;
  font-size: 14px;
  color: #515A6E;
  margin-bottom: 20px;
}

.codeSpan {
  font-weight: 500;
  color: #000000;
}

.codeText2 {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 300;
  color: #13CE66;
  cursor: pointer;
}
</style>
<style scoped>
.layui-table-view {
  margin-top: 12px;
}
</style>